<template>
	<div class="CompontensViews" :style="{ '--table-radio': tableRadio, '--draw-radio': drawRadio }"
		v-loading="loading">
		<!-- 头部搜索 -->
		<div class="right-content-title">
			<div class="btns">
				<el-button size="mini"
					v-show="styleOptionsValue != 3 && !(checkList.length == 1 && checkList.indexOf(3) != -1)"
					style="width: 24px !important;display: flex;justify-content: center;align-items: center;margin-left: 10px;"
					@click="ViewFn(1)"><i class="el-icon-caret-top" style="text-align: center;"></i></el-button>
				<el-button size="mini"
					v-show="styleOptionsValue != 3 && !(checkList.length == 1 && checkList.indexOf(3) != -1)"
					style="width: 24px !important;display: flex;justify-content: center;align-items: center;"
					@click="ViewFn(2)"><i class="el-icon-caret-bottom" style="text-align: center;"></i></el-button>
			</div>
			<div class="left-select">
				<!-- 显示 -->
				<div class="selectView">
					<el-button type="primary" size="mini" style="height: 24px;line-height: 0;font-size: 14px;"
						class="select-btn" v-if="styleOptionsValue == 2" @click="(styleOptionsValue = 3), styleFun()">
						{{ $t("message.styleOptions.value1") }}
					</el-button>
					<el-button type="primary" size="mini" style="height: 24px;line-height: 0;font-size: 14px;"
						class="select-btn" v-if="styleOptionsValue == 3" @click="(styleOptionsValue = 2), styleFun()">
						{{ $t("message.styleOptions.value3") }}
					</el-button>
				</div>
				<!-- 检査目的 -->
				<div class="selectView">
					<div class="selectViewLabel" :style="{ color: `#${getInspPurposeColorFlg}` }">
						{{ $t("message.bhView.label.checkObjective") }}
					</div>
					<el-select v-model="ispPurSourceValue" :placeholder="$t('message.bhView.label.placeholderSearch')
						" class="select-ipt" @change="ispPurSourceValueChange">
						<el-option v-for="(item, index) in ispPurSource" :key="index" :label="item.label"
							:value="item.label"></el-option>
					</el-select>
				</div>
				<!-- 刷新 -->
				<el-tooltip class="item" effect="dark" :content="$t('message.public.refresh')" placement="top">
					<div class="refresh" @click="getOfferHeaderApi('', true)">
						<i class="iconfont">&#xe81f;</i>
					</div>
				</el-tooltip>
				<!-- 3D viewer -->
				<!-- <div class="DViewer">
					<el-tooltip class="item" effect="dark" :content="$t('message.tooltip.title_2')" placement="top">
						<i class="iconfont" @click="modelClick">&#xe8e5;</i>
					</el-tooltip>
				</div> -->


				<!-- <el-tooltip class="item" effect="dark" content="計画" placement="top">
					<div class="DViewer">
						<i class="el-icon-document" @click="cpsClick1"></i>
					</div>
				</el-tooltip>
				<el-tooltip class="item" effect="dark" content="結果" placement="top">
					<div class="DViewer">
						<i class="el-icon-document-checked" @click="cpsClick"></i>
					</div>
				</el-tooltip> -->
				<el-checkbox-group v-model="checkList" style="margin: 0 16px;" :min="1" @change="changeCheckBoxFn">
					<el-checkbox :label="1">：工事</el-checkbox>
					<el-checkbox :label="2">：検査</el-checkbox>
					<el-checkbox :label="3">：肉厚</el-checkbox>
				</el-checkbox-group>

				<el-button type="primary" size="mini" style="height: 22px;line-height: 0;font-size: 14px;"
					class="select-btn1" @click="cpsClick" :disabled="checkList.indexOf(1) == -1">
					工事
				</el-button>
				<el-button type="primary" size="mini" style="height: 22px;line-height: 0;font-size: 14px;"
					class="select-btn1" @click="cpsClick1" :disabled="checkList.indexOf(2) == -1">
					検査
				</el-button>

			</div>

			<div class="right-select">
				<!-- 计划表示时间 -->
				<!-- <div class="select-tab">
					<div class="select-tab-label">
						{{ $t("message.bhView.label.planningTime") }}
					</div>
					<el-select v-model="planningTime" :placeholder="$t('message.bhView.label.placeholderSearch')
						" class="select-tab-ipt" @change="changePlanningTime">
						<el-option v-for="item in planningTimeList" :key="item.key" :label="item.label"
							:value="item.key"></el-option>
					</el-select>
				</div> -->

				<div class="selectView" style="margin-left: 16px">
					<el-button type="primary" size="mini" style="height: 22px;line-height: 0;font-size: 14px;"
						class="select-btn" @click="ymFlg = ymFlg == 0 ? 1 : 0, getOfferDetialDataApi(true)">
						{{ ymFlg == 0 ? '年表示' : '月表示' }}
					</el-button>
				</div>
			</div>
		</div>
		<!--table -->
		<div class="tabel-view-wrapper">
			<SixthTabel ref="SixthTabel" :tableHeight="tableHeight" :prposTabelData="prposTabelData" :loading="loading"
				@getMSTabelRow="getMSTabelRow" :tabelDataConfig="tabelDataConfig" :empty="empty" :LAB="LAB"
				:Month="Month" :currentDiff="currentDiff">
			</SixthTabel>
		</div>
		<!-- 类型筛选 -->
		<div class="select-legend-view"
			v-show="styleOptionsValue != 3 && !(checkList.length == 1 && checkList.indexOf(3) != -1)">
			<div class="select-legend">
				<el-radio-group v-model="radio" @change="$store.commit('changeMsDetailRadio', radio)">
					<el-radio label="2">{{
						$t("message.tooltip.title_4")
					}}</el-radio>
					<el-radio label="1" v-show="checkList.indexOf(2) != -1">{{
						$t("message.tooltip.title_3")
					}}</el-radio>
				</el-radio-group>
			</div>

			<div class="select-legend">
				<!-- <el-button size="mini"
					style="width: 24px !important;display: flex;justify-content: center;align-items: center;"
					@click="ViewFn(1)"><i class="el-icon-caret-top" style="text-align: center;"></i></el-button>
				<el-button size="mini"
					style="width: 24px !important;display: flex;justify-content: center;align-items: center;"
					@click="ViewFn(2)"><i class="el-icon-caret-bottom" style="text-align: center;"></i></el-button> -->
			</div>

		</div>

		<div class="select-legend-view"
			v-show="styleOptionsValue != 3 && (checkList.length == 1 && checkList.indexOf(3) != -1)">
			<div class=" left-view" style="display: flex;">
				<div class="select-legend">
					<el-select v-show="styleOptionsValue == 2" v-model="colorOptionsValue" :placeholder="$t('message.bhView.label.placeholderSearch')
						" class="select-legend--ipt" @change="colorOptionsChange">
						<el-option v-for="item in colorOptions" :key="item.key" :label="item.value"
							:value="item.key"></el-option>
					</el-select>
				</div>
				<div v-show="styleOptionsValue == 2" class="select-legend-color" v-for="(Item, index) in legendList"
					:key="index">
					<div class="select-legend-color-box" :style="`background:${Item.color}`"></div>
					<div class="select-legend-color-label">{{ Item.name }}</div>
				</div>
			</div>

		</div>
		<!-- cad -->
		<div class="CADView" v-show="styleOptionsValue != 3">
			<!-- <p class="iconfont-view">
                <i class="iconfont dragIcon" @mousedown="mouseDown">&#xe820;</i>
              </p> -->
			<div id="LineEcharts" v-show="styleOptionsValue == 1"></div>
			<!-- <div id="CADView"></div> -->
			<CadViewForMS v-if="styleOptionsValue == 2 && !(checkList.length == 1 && checkList.indexOf(3) != -1)"
				ref="CadViewForMS" :isShow="styleOptionsValue == 2" @onMarkupSelected="onMarkupSelected"
				:isShowMarkups="radio" />

			<CadViewForBH v-if="styleOptionsValue == 2 && (checkList.length == 1 && checkList.indexOf(3) != -1)"
				ref="cadViewForBH" :isShow="styleOptionsValue == 2" @onMarkupSelected="onMarkupSelected" />
		</div>
		<!-- 3D Viewer -->
		<div class="Viewer" v-if="ViewerFlag">
			<matterportView class="martter_view" :towRsUrl="towRsUrl" @onCloseClick="modelClick" />

		</div>

		<!-- 右侧信息框 -->
		<!-- 工事计划 -->
		<div class="right-Viewer" v-show="rightViewFlag" v-cloak>
			<rightViewTabs :tableSelectRow="tableSelectRow" @onCloseClick="cpsClick" ref="rightViewTabs"
				:rightViewFlag1="rightViewFlag">
			</rightViewTabs>
		</div>
		<!-- 检査计划 -->
		<div class="right-Viewer" v-show="rightViewFlag1" v-if="!$hasOption('OPT_IDEM')" v-cloak>
			<rightViewTabs1 :tableSelectRow="tableSelectRow" @onCloseClick="cpsClick1" :rightViewFlag1="rightViewFlag1"
				@updateSvgAndMarkups="updateSvgAndMarkups">
			</rightViewTabs1>
		</div>

		<!-- 出光 -->
		<div class="right-Viewer" v-show="rightViewFlag1" v-if="$hasOption('OPT_IDEM')" v-cloak>
			<rightViewTabs1Customer1 :tableSelectRow="tableSelectRow" @onCloseClick="cpsClick1"
				@updateSvgAndMarkups="updateSvgAndMarkups" :rightViewFlag1="rightViewFlag1">
			</rightViewTabs1Customer1>
		</div>

	</div>
</template>

<script>
import {
	addMachineIndoorView,
	GetLstLab,
	GetMacTypePlanList,
	getFilterPlan,
	getOfferHeaderObjctl,
	getHeaderConfig,
	getCorrData,
	getCorrColorData,
	GetColorYM
} from "@/api/api.js";
import $ from "jquery";
import SixthTabel from "./SixthTabel";
import CadViewForMS from "./CadViewForMS";
import rightViewTabs from "./MSDialogCompontens/TabsCompontens1.vue";
import rightViewTabs1 from "./MSDetailDialogCompontens/TabsCompontens1.vue";
import rightViewTabs1Customer1 from "@/components/Customize/Customer003/views/MSDetailDialogCompontens/TabsCompontens1.vue";
import { getLocalStorage } from "@/utils/storage";
import eventBus from "../../eventBus/bus";
import matterportView from "./MSDialogCompontens/matterportView.vue";
import { showLoading, hideLoading } from "@/utils/loading";
import CadViewForBH from "./CadViewForBH";

export default {
	props: ["leftTabelRow", "valuePlant"],
	name: "MSDetaliCompontens",
	data() {
		return {
			GetMacTypePlanListFlg: 0,
			currentDiff: 0,
			Month: {},
			LAB: [],
			colorOptionsValueSelect: "",
			colorOptionsValue: null,
			colorOptions: [],
			legendList: [],
			ymFlg: 0,
			checkList: [1, 2, 3],
			checkListTemp: [1, 2, 3],
			// checkList: [3],
			getIndex: 0,
			MSDetailTabelKey: 0,
			// 显示样式
			styleOptions: [
				{
					value: this.$t("message.styleOptions.value1"),
					id: 2,
				},
				{
					value: this.$t("message.styleOptions.value3"),
					id: 3,
				},
			],
			styleOptionsValue: 3,
			options: [],
			value: "",
			planningTime: "",
			planningTimeKey: null,
			planningTimeList: [],
			planningTimeSelect: "",
			planningTimeSelectList: [],
			tableHeight: 278,
			prposTabelData: [], // tabel数据
			loading: true, // tabel加载loading
			pageIndex: 1,
			pageSize: 20,
			radio: this.$store.state.msDetailRadio,
			//       radio: "2",
			ViewerFlag: false,
			rightViewFlag: false,
			rightViewFlag1: false,
			iframeUrl:
				"https://nv2.navvis-kke.biz/iv.eneos-negishi/?vlon=1.87&vlat=-0.16&fov=76.0&image=3541457883867378",
			towRsUrl: "https://my.matterportvr.cn/show/?m=fdzfRGMJLjQ",
			urlValue: "",
			ispPurSource: [],
			ispPurSourceValue: 0,
			ispPurSourceValueTemp: 0,
			ispPurSourceKye: "",
			btn_list: [],
			btn_list_index: 0,
			btn_list_value: "",
			filterPlanKey: "",
			getInspPurposeColorFlg: 0,
			tabelDataConfig: {
				ssnDate: {
					width: 0,
					isFlex: false,
					isShow: false,
				},
				opeDate: {
					width: 0,
					isFlex: false,
					isShow: false,
				},
				inspectName: {
					width: 0,
					isFlex: false,
					isShow: false,
				},
				posNo: {
					width: 0,
					isFlex: false,
					isShow: false,
				},
				posName: {
					width: 0,
					isFlex: false,
					isShow: false,
				},
				ispSpcCode: {
					width: 0,
					isFlex: false,
					isShow: false,
				},
				ispWayName: {
					width: 0,
					isFlex: false,
					isShow: false,
				},
				impReason: {
					width: 0,
					isFlex: false,
					isShow: false,
				},
				timCodName: {
					width: 0,
					isFlex: false,
					isShow: false,
				},
				opnCodName: {
					width: 0,
					isFlex: false,
					isShow: false,
				},
				thkCodName: {
					width: 0,
					isFlex: false,
					isShow: false,
				},
				icdCstCodName: {
					width: 0,
					isFlex: false,
					isShow: false,
				},
				ispRstCodName: {
					width: 0,
					isFlex: false,
					isShow: false,
				},
				summary: {
					width: 0,
					isFlex: false,
					isShow: false,
				},
				cntPln: {
					width: 0,
					isFlex: false,
					isShow: false,
				},
				orgThck: {
					width: 0,
					isFlex: false,
					isShow: false,
				},
				mgtThck: {
					width: 0,
					isFlex: false,
					isShow: false,
				},
				lmtThck: {
					width: 0,
					isFlex: false,
					isShow: false,
				},
				crrDept: {
					width: 0,
					isFlex: false,
					isShow: false,
				},
				heaThck: {
					width: 0,
					isFlex: false,
					isShow: false,
				},
				remThck: {
					width: 0,
					isFlex: false,
					isShow: false,
				},
				chgDate: {
					width: 0,
					isFlex: false,
					isShow: false,
				},
				lstThk: {
					width: 0,
					isFlex: false,
					isShow: false,
				},
				lstLif2: {
					width: 0,
					isFlex: false,
					isShow: false,
				},
				oddLif: {
					width: 0,
					isFlex: false,
					isShow: false,
				},
			},
			empty: "",

			tableSelectRow: null,

			tableRadio: "50%",
			nTableRadio: 0.5,
			drawRadio: "50%",
		};
	},
	components: {
		SixthTabel,
		CadViewForMS,
		CadViewForBH,
		rightViewTabs,
		rightViewTabs1,
		rightViewTabs1Customer1,
		matterportView
	},
	watch: {
		leftTabelRow: {
			deep: true,
			// immediate: true,
			handler: function (newV, oldV) {


				// 肉厚图纸的刷新
				// this.$refs.cadViewForBH.loadSvgDataByRow(
				// 	18887, "206", "215", "2024-07", 9, "", "", 1, false, "", "", "-1", 3
				// )

				// this.updateSvgAndMarkups();



				this.$emit("getNumberData", 0);
				if (JSON.stringify(newV) === JSON.stringify(oldV)) {
					return;
				}

				if (this.rightViewFlag) {
					// this.cpsClick();
					// getMachineIndoorView({
					// 	macCode: this.leftTabelRow.macCode,
					// }).then((res) => {
					// 	if (res.data.code != 0) {
					// 		this.urlValue = "";
					// 		return;
					// 	}
					// 	this.urlValue = res.data.data[0].indoorViewAddr;
					// });
				}

				if (this.ViewerFlag) {
					// this.modelClick();
					// getMachineIndoorView({
					// 	macCode: this.leftTabelRow.macCode,
					// }).then((res) => {
					// 	if (res.data.code != 0) {
					// 		this.urlValue = "";
					// 		return;
					// 	}
					// 	this.urlValue = res.data.data[0].indoorViewAddr;
					// });
				}
				this.updateSvgAndMarkups();
				this.getOfferHeaderApi();
				// getMachineIndoorView({ macCode: newV.macCode }).then((res) => {
				// 	if (res.data.code != 0) {
				// 		this.urlValue = "";
				// 		return;
				// 	}
				// 	this.urlValue = res.data.data[0].indoorViewAddr;
				// });

				this.towRsUrl = newV.note
					? newV.note
					: "https://my.matterportvr.cn/show/?m=fdzfRGMJLjQ";
			},
		},
	},
	methods: {

		//	图画框放大缩小
		ViewFn(type) {
			console.log(this.tableRadio, type, '123');
			if ((this.tableRadio == '20.00%' && type == 1) || (this.tableRadio == '80.00%' && type == 2)) {
				return
			}
			if (type == 1) {
				this.$nextTick(function () {
					this.tableRadio = this.currentFn1(this.tableRadio);
					this.drawRadio = this.currentFn(this.drawRadio);
					this.nTableRadio += 0.2;
					this.tableHeight =
						$(".tabel-view-wrapper").height() - 75

					this.$refs.CadViewForMS.loadSvg();
					this.$refs.CadViewForBH.loadSvg();
				})
			}
			if (type == 2) {
				this.$nextTick(function () {
					this.tableRadio = this.currentFn(this.tableRadio);
					this.drawRadio = this.currentFn1(this.drawRadio);
					this.nTableRadio -= 0.2;
					this.tableHeight =
						$(".tabel-view-wrapper").height() + 75

					this.$refs.CadViewForMS.loadSvg();
					this.$refs.CadViewForBH.loadSvg();
				})
			}
		},
		currentFn(val) {
			// 将当前值转换为数字
			let currentValue = parseFloat(val.replace('%', ''));
			// 增加 10%
			currentValue += 10;

			// 转换回字符串并添加 '%'
			return currentValue.toFixed(2) + '%';
		},
		currentFn1(val) {
			// 将当前值转换为数字
			let currentValue = parseFloat(val.replace('%', ''));
			// 增加 10%
			currentValue -= 10;

			// 转换回字符串并添加 '%'
			return currentValue.toFixed(2) + '%';
		},

		// 腐蚀率改变
		colorOptionsChange() {
			// this.getCorrColorDataApi(this.colorOptionsValue);
			// this.updateSvgAndMarkups();
			this.getCorrColorDataApi(this.colorOptionsValue);
			this.updateSvgAndMarkups();

		},
		getCorrDataFun() {
			getCorrData({ Type: 2 }).then((res) => {
				if (res.data.code != 0) {
					this.colorOptions = [];
					return;
				}
				this.colorOptions = res.data.data;
				this.colorOptionsValue = this.colorOptions[0].key;
				this.$store.state.colorOptionsCode == ""
					? (this.colorOptionsValueSelect = this.colorOptions[0].key)
					: (this.colorOptionsValueSelect =
						this.$store.state.colorOptionsCode);

				this.getCorrColorDataApi(this.colorOptionsValue);
			});
		},
		//获取图纸球标等颜色信息
		getCorrColorDataApi(colorOptionsValue = '206') {
			let dataJson = {
				corrCode: colorOptionsValue || '206',
				type: 2,
				IsSearchCorr: "false",
			};
			getCorrColorData(dataJson).then((res) => {
				this.legendList = [];
				if (res.data.code != 0) {
					return;
				}
				this.legendList = res.data.data;
			});
		},

		changeCheckBoxFn(value) {

			//初始监听状态

			eventBus.$emit('getBasicStyleCompontensCurrent_EventBus');	//	基本仕样


			let Fn = () => {
				console.log(value);
				this.checkListTemp = value;
				this.getOfferDetialDataApi();

				this.$emit('changeCheckBox', this.checkList);

				this.updateSvgAndMarkups();
			}
			/**
			 * 2。  记录当前函数。
			 */
			if (this.$store.state.isCurrentNext) {
				Fn();
			} else {
				/**
				  * 4-1。   记录原来该运行的函数。
				  * 4-2。   执行保存弹出框操作。   
				  */
				this.$store.commit("changeIsCurrentFn", Fn);

				eventBus.$emit('EventBusBasicStyleCompontensSaveFn');	//	基本仕样
			}

		},
		//布局样式筛选
		styleFun() {

			this.$store.commit(
				"changeMSDetailStyleCode",
				this.styleOptionsValue
			);
			let _this = this;
			if (this.styleOptionsValue == 3) {
				this.$nextTick(function () {
					this.tableHeight = $(".CompontensViews").height() - 50;
				});
				this.tableRadio = '100%';
				this.drawRadio = '0%';
				this.nTableRadio = 0.5;
				return;
			} else {
				this.tableRadio = '50%';
				this.drawRadio = '50%';
				this.nTableRadio = 0.5;
				setTimeout(() => {
					this.$refs.CadViewForMS.loadSvg();
				}, 50);
			}
			//切换布局样式如果是折线图 默认绘制第一条数据
			if (this.styleOptionsValue == 1) {
				this.getLineChartDataApi(this.prposTabelData[0]);
				setTimeout(function () {
					_this.$nextTick(function () {
						_this.tableHeight =
							$(".CompontensViews").height() * this.nTableRadio -
							40;
					});
				});
				return;
			}
			setTimeout(function () {
				_this.$nextTick(function () {
					_this.tableHeight =
						$(".CompontensViews").height() * this.nTableRadio - 40;
				});
			});

			setTimeout(() => {
				this.changeCheckBoxFn();
			}, 300);
		},
		//获取右上表格某一行数据
		getMSTabelRow(row) {
			console.log(row);
			//       if(this.$store.state.msDetailRadio == 1) {
			//               console.log("getMSTabelRow --- 1");
			//               this.$refs.CadViewForMS.setSelectedMarkup(row.posNo);
			//       }
			try {
				this.$refs.CadViewForMS.setSelectedMarkup(row.posNo);
				this.tableSelectRow = row;
			} catch (error) {
				//
			}
		},
		//右下角图纸中markup选中回调
		onMarkupSelected(e) {
			this.$refs.SixthTabel.setCurrentByR(e);
		},

		updateSvgAndMarkups() {
			// 根据
			try {
				this.$refs.CadViewForMS.loadSvgDataByRow(
					this.leftTabelRow.macCode, //this.leftTabelRow.macCode,
					"colorOptionsValue", //this.colorOptionsValue,
					"LifeAssBaseVaule", //this.LifeAssBaseVaule,
					this.leftTabelRow.pltCode, //this.leftTabelRow.pltCode,

					this.leftTabelRow.macName, //this.macName,
					"fasd", //this.valuePlant,
					this.leftTabelRow.macType, //this.leftTabelRow.macType,
					this.styleOptionsValue != 2
				);
			} catch (error) {

			}


			try {
				this.$refs.cadViewForBH.loadSvgDataByRow(
					this.leftTabelRow.macCode,
					this.colorOptionsValueSelect,
					this.colorOptionsValue,
					"2024-07",
					this.leftTabelRow.pltCode,
					this.leftTabelRow.macName,
					"",
					this.leftTabelRow.macType,
					this.styleOptionsValue != 2,
					this.value, // 筛选检査分区
					// this.judgValue,
					// this.positionValue,
					"", "",
					3
				);
			} catch (error) {

			}
		},
		modelClick() {
			this.rightViewFlag = false;
			this.rightViewFlag1 = false;
			let _this = this;
			let parentWidth = $(".CompontensViews").width();
			if (!_this.ViewerFlag) {
				$(".CADView").animate(
					{ width: parentWidth / 2 },
					300,
					function () {
						_this.ViewerFlag = !_this.ViewerFlag;
						_this.updateSvgAndMarkups();
					}
				);
				$(".tabel-view-wrapper").animate(
					{ width: parentWidth / 2 },
					300
				);
				$(".select-legend-view").animate(
					{ width: parentWidth / 2 },
					300
				);

				// getMachineIndoorView({
				// 	macCode: _this.leftTabelRow.macCode,
				// }).then((res) => {
				// 	if (res.data.code != 0) {
				// 		_this.urlValue = "";
				// 		return;
				// 	}
				// 	_this.urlValue = res.data.data[0].indoorViewAddr;
				// });
			} else {
				_this.ViewerFlag = !_this.ViewerFlag;
				$(".CADView").animate({ width: parentWidth }, 300, function () {
					_this.updateSvgAndMarkups();
				});
				$(".tabel-view-wrapper").animate({ width: parentWidth }, 300);
				$(".select-legend-view").animate({ width: parentWidth }, 300);
			}
			eventBus.$emit("resetTabelStyleForMSD");
		},
		//结果
		cpsClick(isShowSave = true) {
			// if (this.rightViewFlag1) {
			// 	this.cpsClick1();
			// }
			if (!isShowSave) {
				this.$store.commit("changeIsCurrentNext", true);
			} else {
				eventBus.$emit('getBasicStyleCompontensCurrent_EventBus');	//	基本仕样
			}
			//初始监听状态
			// if (this.rightViewFlag && isShowSave) {
			// 	eventBus.$emit('getBasicStyleCompontensCurrent_EventBus');	//	基本仕样
			// }

			let Fn = () => {

				//初始监听状态
				this.$store.commit('reSetIsStop');
				eventBus.$emit('changeType', 2);
				this.ViewerFlag = false;
				this.rightViewFlag1 = false;

				setTimeout(() => {
					// this.$refs.MSTabel.setCurrentByR(0);

					this.$refs.rightViewTabs.getOfferComboxApi();
				}, 500);
				let _this = this;
				let parentWidth = $(".CompontensViews").width();

				if (!_this.rightViewFlag) {
					setTimeout(() => {
						eventBus.$emit('reClickActive');
					}, 350);
					$(".CADView").animate(
						{ width: parentWidth - 716 },
						300,
						function () {
							_this.rightViewFlag = !_this.rightViewFlag;
							_this.updateSvgAndMarkups();
						}
					);
					$(".tabel-view-wrapper").animate(
						{ width: parentWidth - 716 },
						300
					);
					$(".select-legend-view").animate(
						{ width: parentWidth - 716 },
						300
					);
				} else {
					_this.rightViewFlag = !_this.rightViewFlag;
					$(".CADView").animate({ width: parentWidth }, 300, function () {
						console.log("在这里重绘");
						_this.updateSvgAndMarkups();
					});
					$(".tabel-view-wrapper").animate({ width: parentWidth }, 300);
					$(".select-legend-view").animate({ width: parentWidth }, 300);
				}
				eventBus.$emit("resetTabelStyleForMSD", 1);
			}
			/**
			 * 2。  记录当前函数。
			 */
			if (this.$store.state.isCurrentNext) {
				Fn();
			} else {
				/**
				  * 4-1。   记录原来该运行的函数。
				  * 4-2。   执行保存弹出框操作。   
				  */
				this.$store.commit("changeIsCurrentFn", Fn);

				eventBus.$emit('EventBusBasicStyleCompontensSaveFn');	//	基本仕样
			}


		},
		//式样
		cpsClick1(isShowSave = true) {
			// if (this.rightViewFlag) {
			// 	this.cpsClick();
			// }
			if (!isShowSave) {
				this.$store.commit("changeIsCurrentNext", true);
			} else {
				eventBus.$emit('getBasicStyleCompontensCurrent_EventBus');	//	基本仕样
			}
			//初始监听状态
			// if (this.rightViewFlag1 && isShowSave) {
			// 	eventBus.$emit('getBasicStyleCompontensCurrent_EventBus');	//	基本仕样
			// }

			let Fn = () => {
				//初始监听状态
				this.$store.commit('reSetIsStop');

				this.ViewerFlag = false;
				this.rightViewFlag = false;
				let _this = this;
				let parentWidth = $(".CompontensViews").width();
				setTimeout(() => {
					eventBus.$emit('isGetInfo');
				}, 350);
				if (!_this.rightViewFlag1) {
					setTimeout(() => {
						// eventBus.$emit("reClickActive")
					}, 201);
					$(".CADView").animate(
						{ width: parentWidth - 716 },
						300,
						function () {
							_this.rightViewFlag1 = !_this.rightViewFlag1;
							_this.updateSvgAndMarkups();
						}
					);
					$(".tabel-view-wrapper").animate(
						{ width: parentWidth - 716 },
						300
					);
					$(".select-legend-view").animate(
						{ width: parentWidth - 716 },
						300
					);

					// getMachineIndoorView({
					// 	macCode: _this.leftTabelRow.macCode,
					// }).then((res) => {
					// 	if (res.data.code != 0) {
					// 		_this.urlValue = "";
					// 		return;
					// 	}
					// 	_this.urlValue = res.data.data[0].indoorViewAddr;
					// });
				} else {
					_this.rightViewFlag1 = !_this.rightViewFlag1;
					$(".CADView").animate({ width: parentWidth }, 300, function () {
						console.log("在这里重绘");
						_this.updateSvgAndMarkups();
					});
					$(".tabel-view-wrapper").animate({ width: parentWidth }, 300);
					$(".select-legend-view").animate({ width: parentWidth }, 300);
				}
				eventBus.$emit("resetTabelStyleForMSD");
			}
			/**
			 * 2。  记录当前函数。
			 */
			if (this.$store.state.isCurrentNext) {
				Fn();
			} else {
				/**
				  * 4-1。   记录原来该运行的函数。
				  * 4-2。   执行保存弹出框操作。   
				  */
				this.$store.commit("changeIsCurrentFn", Fn);

				eventBus.$emit('EventBusBasicStyleCompontensSaveFn');	//	基本仕样
			}


		},
		getUrl() {
			const url =
				parent.document.getElementById("iframeId").contentWindow
					.location.href;
			// this.$alert(url)
			console.log(parent.document.getElementById("iframeId"));
		},
		IndoorUrlSet() {
			let dataJson = {
				// id: this.leftTabelRow.indoorID?this.leftTabelRow.indoorID:'',
				macCode: this.leftTabelRow.macCode,
				indoorViewAddr: this.urlValue,
			};
			addMachineIndoorView(dataJson).then((res) => {
				if (res.data.code != 0) {
					return;
				}
				debugger
				this.iframeUrl = this.urlValue;
			});
		},
		GetLstLabApi() {
			let dataJson = {
				userAccount: getLocalStorage("userName"),
			};
			GetLstLab(dataJson).then((res) => {
				this.ispPurSource = [];
				if (res.data.code != 0) {
					this.$store.commit("changeIspPurSourceKey", 0);
					return;
				}
				this.ispPurSource = res.data.data.inspList;
				this.ispPurSourceValue = this.ispPurSourceValue == "" ? res.data.data.inspList[0].label : this.ispPurSourceValue;
				this.ispPurSourceValueTemp = this.ispPurSourceValueTemp == "" ? res.data.data.inspList[0].label : this.ispPurSourceValueTemp;
				this.getInspPurposeColorFlg = res.data.data.inspColor;
				// this.$nextTick(function () {
				// 	if (this.$store.state.ispPurSourceKey) {
				// 		this.ispPurSource.forEach((item) => {
				// 			if (this.$store.state.ispPurSourceKey == item.key) {
				// 				this.ispPurSourceValue = item.label;
				// 			}
				// 		});
				// 	} else {
				// 		this.ispPurSourceKye = this.ispPurSource[0].key;
				// 		this.$store.commit(
				// 			"changeIspPurSourceKey",
				// 			this.ispPurSourceKye
				// 		);
				// 	}
				// });
			});
		},
		// getInspPurposeCombox根据检査目的再次筛选   getInspPurposeColor
		// async getInspPurposeColorApi() {
		// 	let res = await getInspPurposeColor({});
		// 	this.getInspPurposeColorFlg = res.data.data;
		// },
		// async getInspPurposeComboxApi() {
		// 	this.getInspPurposeColorApi();
		// 	this.ispPurSource = [];
		// 	let res = await getInspPurposeCombox({});
		// 	this.ispPurSource = res.data.data.filter(obj => obj.isHidden === 0);
		// 	console.log('this.ispPurSource', this.ispPurSource);
		// 	this.ispPurSource.unshift({
		// 		key: 0, label: "ALL", isHidden: 0
		// 	})
		// },
		async GetColorYMAPi() {
			let dataJson = {
				"dmgCode": this.leftTabelRow.macCode,
			};
			let res = await GetColorYM(dataJson);
			this.Month = res.data.data;
		},
		async getOfferDetialDataApi(flg = false) {

			//初始监听状态
			if (flg) {
				eventBus.$emit('getBasicStyleCompontensCurrent_EventBus');	//	基本仕样
			}

			let Fn = async () => {
				this.GetMacTypePlanListFlg++
				if (this.GetMacTypePlanListFlg != 1) {
					return
				}
				setTimeout(() => {
					this.GetMacTypePlanListFlg = 0;
				}, 500);

				showLoading();
				await this.GetColorYMAPi();
				this.loading = true;
				let dataJson = {
					"pltCode": this.leftTabelRow.pltCode,
					"dmgCode": this.leftTabelRow.macCode,
					"fortificationFlg": this.checkList.indexOf(1) == -1 ? 0 : 1,
					"inspFlg": this.checkList.indexOf(2) == -1 ? 0 : 1,
					"thickFlg": this.checkList.indexOf(3) == -1 ? 0 : 1,
					"ymFlg": this.ymFlg,
					"account": "admin"
				}
				GetMacTypePlanList(dataJson)
					.then((res) => {
						hideLoading();
						this.loading = false;

						if (!res.data.data) {

							this.empty = "No Data";
						} else {
							this.empty = "";
						}
						this.prposTabelData = [];
						if (res.data.code == -1) {
							this.$alert(res.data.msg, '', {
								confirmButtonText: 'OK',
								type: 'warning',
							});
							return;
						}

						if (res.data.code != 0) {
							return;
						}
						this.prposTabelData = res.data.data.macTypePlanList;
						this.LAB = res.data.data.title;
						if (this.ispPurSourceValue != "ALL") {
							this.prposTabelData = this.prposTabelData.filter(item => {
								if (item.flg.value == 'Insp' && !item.flg.isTitle) {
									return item.w_name == this.ispPurSourceValue
								} else {
									return true
								}
							})
						}

					})
					.finally(() => {

					});
			}
			/**
			 * 2。  记录当前函数。
			 */
			if (this.$store.state.isCurrentNext) {
				Fn();
			} else {
				/**
				  * 4-1。   记录原来该运行的函数。
				  * 4-2。   执行保存弹出框操作。   
				  */
				this.$store.commit("changeIsCurrentFn", Fn);

				eventBus.$emit('EventBusBasicStyleCompontensSaveFn');	//	基本仕样
			}


		},
		getFilterPlanApi() {
			getFilterPlan().then((res) => {
				this.btn_list = [];
				if (res.data.code != 0) {
					return;
				}
				this.btn_list = res.data.data;
				if (this.$store.state.filterPlanKey) {
					this.btn_list.forEach((item, index) => {
						if (this.$store.state.filterPlanKey == item.key) {
							this.btn_list_index = index;
						}
					});
				} else {
					this.filterPlanKey = this.btn_list[this.btn_list_index].key;
					this.$store.commit(
						"changeFilterPlanKey",
						this.filterPlanKey
					);
				}
			});
		},
		changeIndex(index) {
			this.btn_list_index = index + 1;
			if (this.btn_list_index > 2) {
				this.btn_list_index = 0;
			}
			this.filterPlanKey = this.btn_list[this.btn_list_index].key;
			this.$store.commit("changeFilterPlanKey", this.filterPlanKey);
			this.getOfferHeaderApi();
		},
		// getPlanPeriodApi() {
		// 	let dataJson = {
		// 		years: 20,
		// 	};
		// 	getPlanPeriod(dataJson).then((res) => {
		// 		if (res.data.code != 0) {
		// 			this.planningTimeList = [];
		// 			this.$store.commit("changePlanningTimeKey", 0);
		// 			return;
		// 		}
		// 		this.planningTimeList = res.data.data;
		// 		if (this.planningTime == '') {
		// 			this.planningTime = this.planningTimeList[this.planningTimeList.length - 1].key
		// 		}

		// 		if (this.$store.state.planningTimeKey) {
		// 			this.planningTimeList.forEach((item) => {
		// 				if (this.$store.state.planningTimeKey == item.key) {
		// 					this.planningTime = item.label;
		// 				}
		// 			});
		// 		} else {
		// 			this.ispPurSourceKye = this.planningTimeList[0].key;
		// 			this.$store.commit(
		// 				"changePlanningTimeKey",
		// 				this.planningTimeKey
		// 			);
		// 		}
		// 	});
		// },
		ispPurSourceValueChange(value) {
			eventBus.$emit('getBasicStyleCompontensCurrent_EventBus');	//	基本仕样

			let Fn = () => {
				this.ispPurSourceKye = value;
				this.ispPurSourceValueTemp = value;
				this.$store.commit("changeIspPurSourceKey", this.ispPurSourceKye);
				this.getOfferHeaderApi();
			}
			if (this.$store.state.isCurrentNext) {
				Fn();
			} else {
				/**
				  * 4-1。   记录原来该运行的函数。
				  * 4-2。   执行保存弹出框操作。   
				  */
				this.$store.commit("changeIsCurrentFn", Fn);
				eventBus.$emit('EventBusBasicStyleCompontensSaveFn');	//	基本仕样
			}

		},
		changePlanningTime(value) {
			this.planningTimeKey = value;
			this.$store.commit("changePlanningTimeKey", this.planningTimeKey);
			this.getOfferHeaderApi();
		},
		async getOfferHeaderObjctlApi(Num) {
			let dataJson = {
				type: 2,
				cntlName: "Spread2",
				formID: "PlanList",
				language: parseInt(getLocalStorage("lang") == "1" ? 2 : 1),
			};
			let res = await getOfferHeaderObjctl(dataJson);
			return res.data.data;
		},
		async getOfferHeaderApi(Num, flg = false) {

			//初始监听状态
			if (flg) {
				eventBus.$emit('getBasicStyleCompontensCurrent_EventBus');	//	基本仕样
			}
			let Fn = () => {
				this.currentDiff = 0;
				let dataJson = {
					type: 2,
					account: getLocalStorage("userName"),
					formID: "PlanList",
					cntlName: "Spread2",
					language: parseInt(getLocalStorage("lang") == "1" ? 2 : 1),
				};
				getHeaderConfig(dataJson).then(async (res) => {
					this.loadFlag = true;
					if (res.data.code != 0) {
						return;
					}
					this.tabelDataConfig = res.data.data;
					this.tabelDataConfig.forEach(item => {
						if (item.isShow && !item.isFlex) {
							this.currentDiff += item.width;
						}
					})
					let titles = await this.getOfferHeaderObjctlApi();
					Object.keys(this.tabelDataConfig).forEach((item, index) => {
						console.log(item);
						this.tabelDataConfig[item].title = titles[index];
					})
					console.log('tabelDataConfig1111111111111111', this.tabelDataConfig);
					this.getOfferDetialDataApi();
				});
			}
			/**
			 * 2。  记录当前函数。
			 */
			console.log('this.$store.state.isCurrentNext', this.$store.state.isCurrentNext);

			if (this.$store.state.isCurrentNext) {
				Fn();
			} else {
				/**
				  * 4-1。   记录原来该运行的函数。
				  * 4-2。   执行保存弹出框操作。   
				  */
				this.$store.commit("changeIsCurrentFn", Fn);

				eventBus.$emit('EventBusBasicStyleCompontensSaveFn');	//	基本仕样
			}

		},
	},
	created() {
		this.$store.commit("changeIspPurSourceKey", 0);
		this.getFilterPlanApi();
		this.GetLstLabApi();
		// this.getPlanPeriodApi();
		this.$nextTick(function () {
			this.updateSvgAndMarkups();
			this.getOfferHeaderApi();
		});

		// 宽高比
		let windowWhRadio =
			document.documentElement.clientWidth /
			document.documentElement.clientHeight;
		if (windowWhRadio > 1.78) {
			// this.tableRadio = "50%";
			// this.drawRadio = "50%";
			// this.nTableRadio = 0.5;
			this.tableRadio = '100%';
			this.drawRadio = '0%';
			this.nTableRadio = 0.5;
		} else {
			this.tableRadio = "40%";
			this.drawRadio = "60%";
			this.nTableRadio = 0.4;
		}
	},
	mounted() {
		this.getCorrDataFun();

		this.$emit('changeCheckBox', this.checkList);

		eventBus.$on("LoadDetailTabelData", (Num) => {
			this.GetLstLabApi();
			this.getOfferHeaderApi(Num);
			// _this.getOfferDetialDataApi();
		});

		this.styleOptionsValue == 3
			? (this.tableHeight = $(".CompontensViews").height() - 50)
			: (this.tableHeight =
				$(".CompontensViews").height() * this.nTableRadio - 40);



		//  如果保存报错则-切换之前的搜索状态
		eventBus.$on("backParamsForLeftView", () => {
			this.ispPurSourceValue = this.ispPurSourceValueTemp;
			this.checkList = this.checkListTemp;
		})

	},
	beforeDestroy() {
		eventBus.$off("backParamsForLeftView");
		eventBus.$off("LoadMSTabelData");
	},
};
</script>
<style lang="scss" scoped>
[v-cloak] {
	display: none;
}

.CompontensViews {
	width: 100%;
	height: 100%;
	position: relative;

	.Viewer,
	.right-Viewer {
		position: absolute;
		width: 700px;
		height: calc(100% - 60px);
		background: #fff;
		right: 0;
		top: 56px;
		z-index: 66;

		.get-url-view {
			width: 100%;
			position: absolute;
			z-index: 666;
			bottom: 10px;
			left: 10px;
			display: flex;
			align-items: center;

			.close-btn {
				width: 82px;
				height: 32px;
				background: #ffffff;
				border: 1px solid #d9d9d9;
				margin-right: 12px;
				border-radius: 4px;
				position: absolute;
				background: #eb7421;
				color: #fff;
				right: 0px;
			}
		}
	}

	.Viewer {
		width: 50%;
	}

	.right-content-title {
		padding: 16px 0 16px 0;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.left-select {
			height: 24px;
			display: flex;
			align-items: center;
			justify-content: flex-start;

			.selectView {
				margin-right: 24px;
				display: flex;
				align-items: center;
				justify-content: flex-start;

				.selectViewLabel {
					line-height: 24px;
					font-size: 14px;
					color: rgba(0, 0, 0, 0.65);
				}

				.select-ipt {
					width: 145px;
					height: 24px;

					::v-deep .el-input__inner {
						width: 145px;
						height: 24px;
						color: rgba(0, 0, 0, 0.65);
						background: #fff;
					}

					::v-deep .el-input__icon {
						line-height: 24px;
					}
				}

				.style-ipt {
					width: 100px;

					::v-deep .el-input__inner {
						width: 100px;
					}
				}
			}

			.refresh {
				min-width: 40px;
				height: 24px;
				border-radius: 4px;
				border: 1px solid #d9d9d9;
				display: flex;
				align-items: center;
				justify-content: center;
				cursor: pointer;

				.iconfont {
					margin: 0 4px;
					font-size: 17px;
					height: 24px;
					line-height: 24px;
				}
			}

			.DViewer {
				margin-left: 8px;
				min-width: 40px;
				height: 24px;
				// border-radius: 4px;
				// border: 1px solid #d9d9d9;
				display: flex;
				align-items: center;
				justify-content: center;

				// cursor: pointer;
				.iconfont,
				.el-icon-document {
					font-size: 20px;
					margin: 0 4px;
					color: #2a7190;
					cursor: pointer;
				}
			}
		}

		.right-select {
			height: 24px;
			display: flex;
			align-items: center;
			justify-content: flex-start;

			.date-btn {
				min-width: 66px;
				height: 24px;
				border-radius: 4px;
				display: flex;
				justify-content: center;
				align-items: center;
				border: 1px solid #eaeaeb;
				margin: 0 4px;
			}

			.date-btn-active {
				background: #106ebe;
				color: #fff;
			}

			.select-tab {
				margin-left: 18px;
				height: 24px;
				display: flex;
				align-items: center;
				justify-content: flex-start;

				.select-tab-ipt {
					width: 120px;

					::v-deep .el-input__inner {
						width: 120px;
						height: 24px;
						color: rgba(0, 0, 0, 0.65);
						background: #fff;
					}

					::v-deep .el-input__icon {
						line-height: 24px;
					}
				}
			}
		}
	}

	.select-btn {
		min-width: 100px;
		height: 24px;
		// background: #106ebe;
		// color: #fff;
		// border: 1px solid #eaeaeb;
		border-radius: 4px;
		cursor: pointer;
	}

	.select-btn1 {
		min-width: 50px;
		height: 24px;
		line-height: 0;
		// background: #106ebe;
		// color: #fff;
		// border: 1px solid #eaeaeb;
		border-radius: 4px;
		cursor: pointer;
	}

	.select-legend-view {
		width: 100%;
		padding: 10px 0;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.select-legend {
			height: 24px;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			// margin-right: 24px;

			.select-legend--ipt {
				::v-deep .el-input__inner {
					width: 120px;
					height: 24px;
					color: rgba(0, 0, 0, 0.65);
					background: #f8f8f8;
				}

				::v-deep .el-input__icon {
					line-height: 24px;
				}
			}
		}

		.select-legend-color {
			margin-right: 16px;
			height: 24px;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			min-width: 100px;
			position: relative;

			.select-legend-color-box {
				width: 24px;
				height: 24px;
				border-radius: 2px;
				border: 1px solid #d9d9d9;
				margin-right: 8px;
				cursor: pointer;
			}
		}

		.messageColor {
			margin-left: 8px;
			position: absolute;
			right: 16px;
		}
	}

	.tabel-view-wrapper {
		height: calc(var(--table-radio) - 40px);
		overflow: hidden;
	}

	.CADView {
		width: 100%;
		height: calc(var(--draw-radio) - 40px);
		position: relative;
		background: #fff;
		border: 1px solid #c3c3c3;
		border-top: 3px solid #c3c3c3;

		.iconfont-view {
			position: absolute;
			width: 100%;
			height: 4px;
			left: 0;
			top: -2px;
			opacity: 0;
			transition: 0.5s;
			z-index: 10;
			cursor: pointer;
		}

		#LineEcharts {
			width: 100%;
			height: calc(100% - 80px);
			margin-top: 20px;
		}

		.dragIcon {
			position: absolute;
			top: -22px;
			left: 50%;
			transform: translate(-50%);
			font-size: 30px;
		}

		.iconfont-view:hover {
			opacity: 1;
		}
	}
}

::v-deep .el-table--border td,
::v-deep .el-table--border th,
::v-deep .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
	border-right: 0 none;
}

// ::v-deep .el-icon-document:before{
//   content: "\e785" ;
// }
.el-icon-document-checked {
	font-size: 20px;
	margin: 0 4px;
	color: #2a7190;
	cursor: pointer;
}

.btns {
	display: flex;
	position: absolute;
	right: 130px;
	top: -36px;

	button {
		height: 24px !important;
	}
}
</style>
